import React, { Component } from 'react'
import { Tree } from './index'

export default class TreeDemo extends Component {
  constructor (props) {
    super(props)
    this.state = {
      treeData: []
    }
  }
  componentDidMount () {
    setTimeout(() => {
    this.state.treeData = [
        {
          name: 'a',
          id: 'a',
          checked: true,
          children: [{
            name: 'a1',
            id: 'a1',
            checked: true,
            children: [{
              name: 'a11',
              id: 'a11',
              checked: true
            }, {
              name: 'a12',
              id: 'a12',
              checked: true,
              children: [{
                name: 'a121',
                id: 'a121',
                checked: false
              }, {
                name: 'a122',
                id: 'a122',
                checked: true
              }]
            }]
          }, {
            name: 'a2',
            id: 'a2',
            checked: true
          }, {
            name: 'a3',
            id: 'a3',
            checked: false
          }]
        }, {
          name: 'b',
          id: 'b',
          checked: false
        }
      ]
      this.setState({})
    }, 500)
  }
  onCheckedChange () {
    console.log(this.state.treeData)
  }
  render () {
    return (
      <div>
        <Tree
        data={this.state.treeData}
        onCheckedChange={this.onCheckedChange.bind(this)}
        renderFn={(data) => { return(<span><b>{data.name}</b>+<span>{data.id}</span></span>) }}>
        </Tree>
      </div>
    )
  }
}